<template>
    <div class="profile-container">
      <el-card class="profile-card">
        <template #header>
          <div class="card-header">
            <span>个人信息修改</span>
          </div>
        </template>
  
        <!-- 表单 -->
        <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
          <!-- 账号 -->
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" disabled />
          </el-form-item>
  
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入新密码"
            />
          </el-form-item>
  
          <!-- 名称 -->
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
  
          <!-- 性别 -->
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio :value="'male'">男</el-radio>
              <el-radio :value="'female'">女</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <!-- 头像 -->
          <el-form-item label="头像" prop="avatar">
            <el-upload
              class="avatar-uploader"
              action="" 
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.avatar" :src="form.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
  
          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  import type { UploadProps } from 'element-plus';
  
  // 表单数据
  const form = reactive({
    username: 'admin', // 账号（不可修改）
    password: '', // 密码
    name: '管理员', // 名称
    gender: 'male', // 性别
    avatar: 'https://avatars.githubusercontent.com/u/1?v=4', // 头像
  });
  
  // 表单验证规则
  const rules = reactive({
    username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    ],
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    avatar: [{ required: true, message: '请上传头像', trigger: 'change' }],
  });
  
  // 表单引用
  const formRef = ref();
  
  // 提交表单
  const submitForm = () => {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        ElMessageBox.confirm('确定保存修改吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            // 模拟保存逻辑
            console.log('表单数据：', form);
            ElMessage.success('保存成功！');
          })
          .catch(() => {
            ElMessage.info('已取消保存');
          });
      } else {
        ElMessage.warning('请填写完整信息');
      }
    });
  };
  
  // 重置表单
  const resetForm = () => {
    formRef.value.resetFields();
  };
  
  // 头像上传成功
  const handleAvatarSuccess: UploadProps['onSuccess'] = (response, file) => {
    if (file.raw) {
      form.avatar = URL.createObjectURL(file.raw);
    }
  };
  
  // 头像上传前的校验
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (file) => {
    const isImage = file.type.startsWith('image/');
    const isLt2M = file.size / 1024 / 1024 < 2;
  
    if (!isImage) {
      ElMessage.error('只能上传图片文件！');
    }
    if (!isLt2M) {
      ElMessage.error('头像图片大小不能超过 2MB！');
    }
  
    return isImage && isLt2M;
  };
  </script>
  
  <style scoped lang="scss">
  .profile-container {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
  
  .profile-card {
    width: 600px;
  }
  
  .card-header {
    font-size: 18px;
    font-weight: bold;
  }
  
  .avatar-uploader {
    :deep(.el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
  
    :deep(.el-upload:hover) {
      border-color: var(--el-color-primary);
    }
  
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
  </style>